<template>
    <div id="app">
        <header class="main-header">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        <h1>vue测试项目</h1>
                    </div>
                </div>
            </div>
        </header>
        <nav class="main-navigation">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="navbar-header">
                            <span class="nav-toggle-button collapsed" data-toggle="collapse" data-target="#main-menu" aria-expanded="false">
                            <span class="sr-only">切换</span>
                            <i class="fa fa-bars"></i></span>
                        </div>
                        <div class="navbar-collopse collapse in" id="main-menu" aria-expanded="true">
                            <ul class="menu">
                                <li>
                                    <router-link to="/maps">地图取点</router-link>
                                </li>
                                <li>
                                    <router-link to="/coordinate">路径测试</router-link>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </nav>

        <section class="content-wrap">
            <div class="container">
                <div class="row">
                    <div class="col-md-8 main-content">
                        <transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
                            <router-view/>
                        </transition>
                    </div>
                    <div class="col-md-4 sidebar">
                        <div class="widget">
                            <h4 class="title">社区</h4>
                            <div class="content community">
                                <p>This is the XIHE.</p>
                                <p>
                                    <a href="https://m.xhbds.net/xihe" target="_blank">
                                        <i class="fa fa-comments"></i> 羲和社区
                                    </a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
export default {
    name: 'app'
}
</script>

<style>
    * {
        padding: 0;
        margin: 0;
    }
    body {
        background-color: #ebebeb;
    }
    .main-header {
        background-image: url(../static/images/header_bg.jpg);
        padding: 42px 0;
        text-align: center;
        background-color: #f4645f;
    }
    .main-header h1 {
        color: #fff;
    }
    .main-navigation {
        text-align: center;
        background: #fff;
        border-top: 1px solid #ebebeb;
        margin-bottom: 35px;
        border-bottom: 2px solid #e1e1e1;
    }
    .nav-span {
        padding: 6px 20px;
    }
    .main-navigation .menu{
        margin-bottom: 0;
    }
    .main-navigation .menu li {
        list-style: none;
        display: inline-block;
        position: relative;
    }
    .main-navigation .menu>li>a {
        line-height: 4em;
        display: block;
        padding: 0 18px;
    }
    .router-link-active {
        font-size: 18px;
        font-weight: bold;
    }
    .main-content {
        background: #fff;
        min-height: 500px;
    }
    .sidebar .widget {
        background: #fff;
        padding: 21px 30px;
        margin-bottom: 35px;
    }

</style>
